<template>
    <div class="detail-content">
        <ul class="address">
            <li>
                <router-link to="/detail/1740858">
                    地址：{{ajaxData.data.address}}
                    <i class="icon-arrow-right"></i>
                </router-link>
            </li>
            <li>
                <router-link to="/detail/1740858">
                    时间：查看景点开发时间
                    <i class="icon-arrow-right"></i>
                </router-link>
            </li>
        </ul>
        <ul class="fen">
            <li>
                <router-link to="/detail/1740858">
                    <i @click="getKey(key)" v-for="(item,key) in zanList" :key="key" class="icon-shoucang1" :class="{'icon-shoucang':item}"></i>
                </router-link>
            </li>
        </ul>
        <detail-list :ajaxData="ajaxData"></detail-list>

    </div>
</template>

<script>
    import DetailList from "./detail-list"
    export default {
        name: "detail-content",
        inject:['ajaxData'],
        components:{
            DetailList
        },
        data(){
            return {
                zanList: [0,0,0,0,0]
            }
        },
        methods:{
            getKey(key){
                this.zanList = this.zanList.map(function () {
                    return key-- > -1
                })
            }
        }
    }
</script>


<style lang="scss" scoped>
    @import "~css/main.scss";
    @import "~css/varibles.scss";
    .detail-content{
        position: relative;
        border-radius: .1rem .1rem 0 0;
        z-index:5;
        background-color: #ececec;
        margin-top: -0.1rem;
        overflow: hidden;
        >ul{
            margin-bottom: .2rem;
            padding: 0 .26rem;
            background-color: #fafafa;
            >li{
                line-height: .68rem;
                @include ellipsis;
                padding-right: 1.2rem;
            }
        }
        .icon-arrow-right{
            position: absolute;
            right:.3rem;
        }
        .fen{
            display: flex;
            flex-flow:row nowrap;
            box-sizing: border-box;
            li{
                line-height:.68rem;
                .icon-jinakangbaoicons12{
                    font-size: $font-size;
                }
                &::before{
                    content:'';
                    width: $font-size;
                    height:$font-size;
                    background-image: url("/img/icons/android-chrome-192x192.png");
                    background-size:$font-size;
                    /*vertical-align可以尝试middle或text-bottom*/
                    vertical-align: text-bottom;
                    display: inline-block;
                    background-repeat: no-repeat;
                }
                i{
                    font-size: .36rem;
                }
            }
        }
    }
</style>
